<template>
    <div class="box">
        <el-row class="tac">
            <el-col :span="12">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    style="width: 230px;" v-for="item in  menuList " :key="item._id">
                    <el-sub-menu index="1">
                        <template #title>
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item-group v-for="(ele, index) in  item.children " :key="index">
                            <el-menu-item :index="`/home/${ele.url}`" @click="router.push(`/home${ele.url}`)">{{ ele.name
                            }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu> 
                </el-menu>
            </el-col>

        </el-row>

    </div>
</template>

<script setup>
import api from "../utils/request.js";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";


const menuList = ref([])
const roleId = sessionStorage.getItem("roleId")

onMounted(async () => {
    await getData();
})

const router = useRouter();

const getData = async () => {
    let result = await api.get(`/js/menu/${roleId}`)
    console.log(result.data);
    menuList.value = result.data.data

}



</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>